<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
	<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<TITLE>Ajax Tabs Demo</TITLE>

	<link rel="stylesheet" type="text/css" href="../jquery/development-bundle/themes/base/jquery.ui.all.css" />
	<LINK rel="stylesheet" type="text/css" href="../libs/layout-default-latest.css">
	<STYLE type="text/css">

	/*
	 *	REQUIRED pane & wrapper styles
	 *	this code removes padding and borders from all elements that need it
	 */
	#page_header,				/* this pane has a header & content-div, so should not have padding or scrolling */
		#tabs,					/* wrapper for tabs widget */
			#tab_buttons,		/* tab-buttons wrapper (center-north) */
			#tab_panels,		/* tab-panels  wrapper (center-center) */
				.tab-panel {	/* individual tab-panels */
					border:		none;
					padding:	0 !important; /* override UI theme for tab-panels */
					overflow:	hidden;
				}
				.tab-panel {	/* individual tab-panels */
					/* make ALL tab-panels FILL the #tab_panels wrapper */
					width:		100%;
					height:		100%;
				}
				#tab_buttons span.ui-icon { /* (x) close icons/buttons inside the tabs */
					margin-right:	-7px;
					vertical-align:	middle;
					display:		inline-block;
					cursor:			pointer;
				}
	/*
	 *	COSMETIC styling - not required
	 */
	 
    /* remove padding and scrolling from elements that contain an Accordion OR a content-div */
    .ui-layout-center ,	/* has content-div */
    .ui-layout-west ,	/* has Accordion */
    .ui-layout-east ,	/* has content-div ... */
    .ui-layout-east .ui-layout-content { /* content-div has Accordion */
        padding: 0;
        overflow: hidden;
    }
    .ui-layout-center P.ui-layout-content {
        line-height:	1.4em;
        margin:			0; /* remove top/bottom margins from <P> used as content-div */
    }
    h3, h4 { /* Headers & Footer in Center & East panes */
        font-size:		1.1em;
        background:		#EEF;
        border:			1px solid #BBB;
        border-width:	0 0 1px;
        padding:		7px 10px;
        margin:			0;
    }
    .ui-layout-east h4 { /* Footer in East-pane */
        font-size:		0.9em;
        font-weight:	normal;
        border-width:	1px 0 0;
    }
        
        .ui-layout-content {
            overflow:		auto; /* add scrolling to content-divs (panel-wrappers) */
            border-top:		0 !important; /* tab-buttons above this DIV already has a border-bottom */
        }

        /*
         *	TAB-THEME ADJUSTMENTS
         */
        .ui-tabs-nav li {
            white-space:	nowrap;
        }
        .ui-tabs-nav li a {
            font-size:		1em !important;
            padding:		4px 1.5ex 3px !important;
        }
        .ui-tabs-panel {
            font-size:		1em !important;
            padding:		0 !important;
        }
                
        .ui-layout-pane-center {
            background:	#FFD; /* to make pane background stand-out */
            padding:	10px;
            overflow:	hidden;
            }
            .ui-layout-pane-center .ui-tabs-nav {
                /* remove rounded corners from bottom of 'tabs'*/
                -moz-border-radius-bottomleft:		0;
                -moz-border-radius-bottomright:		0;
                -webkit-border-bottom-left-radius:	0;
                -webkit-border-bottom-right-radius:	0;
            }
          
        .ui-layout-resizer { /* all 'resizer-bars' */ 
                background: #DDD; 
        } 

        .ui-layout-toggler { /* all 'toggler-buttons' */ 
                background: #AAA; 
        } 
    	 
	#page_header h3 {
		padding:	5px 15px;
		margin:		0;
	}
	#page_header div.toolbar {
		padding:	3px 10px;
		}
		#page_header .toolbar button {
			padding:	5px 15px;
		}
	/*
	 *	styles for layouts & elements inside tab-panels
	 */
	.tab-panel .ui-layout-north {
		border-width:	0 0 1px;
		overflow:		hidden;
	}
	.tab-panel .ui-layout-center {
		border-width:	1px 0 0;
		padding:		0;
		overflow:		hidden;
		}
		.tab-panel .ui-layout-center .ui-widget-content {
			padding:	10px 15px;
			overflow:	auto;
		}
		.tab-panel H4 ,
		.tab-panel H5 {
			padding:	10px 15px;
			margin:		0;
		}
		
        .ui-layout-resizer { /* all 'resizer-bars' */ 
                background: #DDD; 
        } 

        .ui-layout-toggler { /* all 'toggler-buttons' */ 
                background: #AAA; 
        } 	
        
        textarea
        {
        	width:100%;
        	height:100%;
        	resizable:none;
        	margin:0px;
        	padding:0px;
        }	

	</STYLE>

    <script type="text/javascript" src="../libs/jquery-latest.js"></script>
    <script type="text/javascript" src="../libs/jquery-ui-latest.js"></script>
    <script type="text/javascript" src="../libs/jquery.layout-latest.js"></script>
    <script type="text/javascript" src="../libs/resizeTabLayout.js"></script>
    <SCRIPT type="text/javascript" src="../libs/themeswitchertool.js"></SCRIPT> 
    <!-- <script type="text/javascript" src="../libs/jquery.layout.resizePaneAccordions-1.0.js"></script> -->
	<SCRIPT type="text/javascript" src="../libs/debug.js"></SCRIPT>
	<SCRIPT type="text/javascript">

	/**
	 *	UI Layout Callback: resizePaneAccordions
	 *
	 *	This callback is used when a layout-pane contains 1 or more accordions
	 *	- whether the accordion a child of the pane or is nested within other elements
	 *	Assign this callback to the pane.onresize event:
	 *
	 *	SAMPLE:
	 *	$("#elem").tabs({ show: $.layout.callbacks.resizePaneAccordions });
	 *	$("body").layout({ center__onresize: $.layout.callbacks.resizePaneAccordions });
	 *
	 *	Version:	1.0 - 2011-07-10
	 *	Author:		Kevin Dalman (kevin.dalman@gmail.com)
	 */
	;(function ($) {
	var _ = $.layout;

	// make sure the callbacks branch exists
	if (!_.callbacks) _.callbacks = {};

	_.callbacks.resizePaneAccordions = function (x, ui) {
		// may be called EITHER from layout-pane.onresize OR tabs.show
		var $P = ui.jquery ? ui : $(ui.panel);
		// find all VISIBLE accordions inside this pane and resize them
		$P.find(".ui-accordion:visible").each(function(){
			var $E = $(this);
			if ($E.data("accordion"))
			{
				$E.accordion("resize");
				Ui.resizeSelectedTab();  // resize fix
			}
		});
	};

	})( jQuery );
	
	// global vars for layouts and tabs - for convenience
	var pageLayout, tabsLayout, $Tabs;
	var newTabCounter = 1;

	// options for the layout generated _inside_ the tab(s)
	var tabLayoutOptions = {
		resizeWithWindow:			false // *** IMPORTANT *** tab-layouts must NOT resize with the window
	,	center__contentSelector:	".ui-widget-content"
	,	north__closable:			false
	,	north__size:	"80%"	
	};


	// onClick event of the Add New Tab button
	function add_tab () {
		$Tabs.tabs( "add", "chat_input.html", "Tab "+ (++newTabCounter) );
		//$Tabs.tabs( "add", "#newTabId", "Tab "+ (++newTabCounter) );
		
	};

	// bound to 'X' icon inside NEW tab-buttons
	function remove_tab (evt) {
		if ( confirm("Close this tab?") ) {
			var	idx = $(this).closest("li").index();
			$Tabs.tabs("remove", idx);
		}
	};


	$(document).ready(function(){
		
		

		// init the Page Layout
		pageLayout = $("body").layout({ 
			resizable:					false
		,	north__closable:			false
		,	south_closable:				false
		,	west__closable:				true
		,	east__closable:				true
	//	,	spacing_open:				0
		,	north__paneSelector:		"#page_header"	// page header
		,	center__paneSelector:		"#tabs"			// tabs-wrapper
		,	west__paneSelector:			".ui-layout-west"	
		,	east__paneSelector:			".ui-layout-east"				
		, 	west__size : 300	
		, 	east__size : 300	
		, 	west__resizable: true
		, 	east__resizable: true
        ,	west__onresize:		$.layout.callbacks.resizePaneAccordions
        ,	east__onresize:		$.layout.callbacks.resizePaneAccordions		
		});

		// init the Tabs-Wrapper layout inside the center-pane of the pageLayout
		tabsLayout = pageLayout.panes.center.layout({
			resizable:				false
		,	closable:				false
	//	,	spacing_open:			0
		,	north__paneSelector:	"#tab_buttons"	// tab-buttons
		,	center__paneSelector:	"#tab_panels"	// tab-panels-wrapper
		,	center__onresize:		$.layout.callbacks.resizeTabLayout // resize 'visible tab layout' if pane resizes
		});

        // ACCORDION - in the West pane
        $("#accordion1").accordion({ fillSpace:	true });
        
        // ACCORDION - in the East pane - in a 'content-div'
        $("#accordion2").accordion({
            fillSpace:	true
        ,	active:		1
        });		
		
		$Tabs = $("#tabs").tabs({
		//	use a tab-button template so we can add a close (X) button/icon
			tabTemplate:	'<LI><A href="#{href}">#{label}  <SPAN class="ui-icon ui-icon-close"></SPAN></A></LI>'
		//	use a tab-template template so we can add our own class, and hide it temporarily
		,	panelTemplate:	'<DIV class="tab-panel ui-tabs-hide"></DIV>'
		,	idPrefix:		"tab_panel_" // prefix for auto-generated ID for panel - eg: "tab_panel_3"
		//	load Ajax tabs only once - when it is created
		,	cache:			true

		//	runs after widget generates a new tab-button and tab-panel
		,	add: function (evt, ui ) { 
				// DISABLE the tabs until we are done adding & loading this tab to avoid issues
				$Tabs.tabs("disable"); // will enable in tabs.load method
				// MOVE the auto-generated panel inside the panels-wrapper DIV
				$( ui.panel ).appendTo( "#tab_panels" );
				// bind the ui-icon-close in the tab (see template above) so it is functional
				$( ui.tab ).find(".ui-icon-close").click( remove_tab ).attr("title","Close This Tab");
				// resize tabs-layout in case tabs now wrap to another line
			 	$Tabs.layout().resizeAll();
				// automatically select the newly added tab
				$Tabs.tabs( "select", ui.index );
			}

		//	runs after widget removes a tab
		,	remove: function (evt, ui ) { 
				// resize tabs-layout in case tabs no longer wrapped to another line
			 	$Tabs.layout().resizeAll();
			}

		//	runs after a tab is made visible - but before Ajax content is loaded
		//	this will also run when the tabs widget initializes - and the first tab-panel is shown
		,	show: $.layout.callbacks.resizeTabLayout // resize the layout inside tab - if one exists

		,	show_ALTERNATE: function (evt, ui) {
				// resize inner tab-layout(s), if are any
				$.layout.callbacks.resizeTabLayout(evt, ui);
				// resize Accordion(s), if are any
				// REQUIRES the jquery.layout.resizePaneAccordions.xx.js callback loaded
				//$.layout.callbacks.resizePaneAccordions(evt, ui);
			}

		//	runs after widget finishes loading Ajax content into a tab
		,	load: function (evt, ui ) { 
				// look for layout-options data on the *first element* of the injected content
				// this trick could also be used to trigger initialization of other widgets, like tabs or accordions
				var $panel		= $( ui.panel )
				// see if data exists AND that there is an object with that name
				,	optsName	= $panel.children(":first").data("layout_options") // eg: "tabLayoutOptions"
				,	options		= window[ optsName ]
				;
				// if layout options found, then init the layout with these options
				if (options)
					$panel.layout( options );
				// now re-enable the tabs widget - loading has completed
				$Tabs.tabs("enable");
			}

		//	runs after widget is created and the first tab is shown
		,	create: function (evt, ui ) { 
				// create the layout inside the first tab
				$("#first_panel").layout( tabLayoutOptions );
			}

		});

		// resize the tabsLayout after creating the tabs to fit the tabs precisely
		tabsLayout.resizeAll();


		// UI Theme Selector - for development testing only
		addThemeSwitcher('#page_header',{ top: '43px', right: '15px' });
		// if a theme is applied by ThemeSwitch *onLoad*, it may change the height of some content,
		// so we need to call resizeLayout to 'correct' any header/footer heights affected
		// call multiple times so fast browsers update quickly, and slower ones eventually!
		// NOTE: this is only necessary because we are changing CSS *AFTER LOADING* (eg: themeSwitcher)
		setTimeout( pageLayout.resizeAll, 1000 ); /* allow time for browser to re-render for theme */
		setTimeout( pageLayout.resizeAll, 5000 ); /* for really slow browsers */
	});

	</SCRIPT>
</HEAD>
<BODY>

<DIV id="page_header">
	<H3 class="ui-state-active"> Page Header </H3>
	<DIV class="toolbar ui-widget-content">
		<BUTTON onClick="add_tab()">Add New Tab</BUTTON> &nbsp;
		<BUTTON onClick="removeUITheme()">Remove UI Theme</BUTTON> 
	</DIV>
</DIV>

<DIV id="tabs">
	<DIV id="tab_buttons">
		<UL> 
			<LI><A href="#first_panel">Tab 1</A></LI> 
		</UL>
	</DIV>
 	<!-- center-pane with dynamic added tab-panels --> 
	<DIV id="tab_panels">

		<DIV id="first_panel" class="tab-panel ui-tabs-hide"> 
			<DIV class="ui-layout-center ui-widget-content"> Tab 1 Center </DIV> 
			</DIV> 
		</DIV> 

	</DIV>
</DIV> 

<div class="ui-layout-west" style="display: none;">
    <div id="accordion1" class="basic">

    <h3 id="account"><a href="#">Account and Status</a></h3>
    <div>
        <div id="connection_create">
            <span id="login_title">Enter to login:</span><br/>
            <input id="username" type="text" placeholder="Your Jabber user name here" autofocus/><br/>
            <input id="password" type="password" placeholder="Your Jabber passowrd here"/><br/>
            <button id="xmpp_connect">Connect</button>
        </div>
        <div id="connection_destroy">
            <span id="logout_title">You are logged in:</span><br/>
            <button id="xmpp_disconnect">Disconnect</button>
        </div>  
    </div>

    <h3 id="buddies"><a href="#">Buddies</a></h3>
    <div id='roster-area'>
        <button id="addContact">Add a contact</button>
        <ul>
        </ul>
    </div>
    
    </div>
</div>

<div class="ui-layout-east" style="display: none;">
    <div class="ui-layout-content">
        <div id="accordion2" class="basic">
            <h3><a href="#">Google Ads</a></h3>
            <div>
            </div>

            <h3><a href="#">Downloads</a></h3>
            <div>
            </div>
        </div>
    </div>
</div>

</BODY>
</HTML>